<!-- 登录页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
</head>
<body>
<!-- 其他登录表单项 -->

<!-- 使用form标签包裹表单元素，设置action和method属性 -->
<form action="/api/sms/login" method="post">

    <!-- 手机号输入框 -->
    <input type="text" id="phoneNumber" name="phoneNumber" placeholder="请输入手机号">

    <!-- 验证码输入框 -->
    <input type="text" id="verificationCode" name="verificationCode" placeholder="请输入验证码">

    <!-- 获取验证码按钮 -->
    <button type="button" onclick="sendVerificationCode()">获取验证码</button>

    <!-- 提交按钮 -->
    <button type="submit">登录</button>

</form>
<!-- 其他登录表单项 -->

<script>
    // 发送验证码
    function sendVerificationCode() {
        var phoneNumber = document.getElementById("phoneNumber").value;
        console.log("Sending verification code for phone number: " + phoneNumber);

        // 发送手机号到后端，后端调用阿里云短信服务发送验证码
        // 可以使用Ajax请求或其他方式将手机号发送到后端

        // 示例使用Ajax请求（需要引入jQuery）
        $.get("/api/sms/send?phoneNumber=" + phoneNumber, function(response) {
            alert(response); // 显示后端返回的消息
        });
    }
</script>
</body>
</html>
